<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>账户项目项目管理系统</title>
    <meta name="keywords" content="账户项目项目管理系统">
    <meta name="description" content="账户项目项目管理系统">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" href="/favicon.ico">

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <!-- 全局js -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!--导航-->
    <script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <!--滚动条-->
    <script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!--经典模块化前端框架-->
    <script src="/js/plugins/layer/layer.min.js"></script>
    <script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
    <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <!-- 自定义js-->
    <script src="/js/hplus.min.js"></script>
    <script src="/js/contabs.min.js"></script>
    <script src="/js/common.js?r=1"></script>
    <link rel="stylesheet" href="/css/plugins/chosen/chosen.css">


</head>

<body class="fixed-sidebar full-height-layout gray-bg mini-navbar">
<div id="wrapper"><div id="page-wrapper" class="gray-bg dashbard-1">
<div class="row border-bottom">
    <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
        </div>
    </nav>
</div>
<div class="row J_mainContent" id="content-main">
<!--视频上传-->
<script type="text/javascript" src="/js/plugins/aliyun-vod/aliyun-sdk.min.js" ></script>
<script type="text/javascript" src="/js/plugins/aliyun-vod/vod-sdk-upload-1.0.6.min.js" ></script>
<link href="/css/plugins/chosen/chosen.css" rel="stylesheet">
<!-- Sweet Alert -->
<link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<style type="text/css">
    .has-success .text-danger{color: #1ab394;}
    .ajaxUpload{border:1px dashed #666;width: 100px;height:100px;background-color: #d6d6d6;border-radius: 4px;cursor: pointer;line-height: 100px;text-align: center;background-size: cover;}
    .ajaxUpload:hover{border-color: #333}
    .upload_progress{height:5px;width:100px;margin-top: 5px;display:none;}
    .video_upload_progress{margin-top: 5px;display:;}
    .video_upload_progress .progress-bar-success{color: #000;font-weight: bold;}
    .radio_box label{margin-right: 15px;}
</style>
<div class="wrapper wrapper-content" >
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>批量上传视频</h5>
                </div>
                <div class="ibox-content form-horizontal pass-form" style="padding-bottom: 300px">
                    <div class="form-group form-inline">
                        <label class="col-sm-3 control-label">视频上传：</label>
                        <div class="col-sm-3">
                            <input type="file" name="file" id="files" class="form-control" multiple />
                        </div>
                    </div>
                    <div class="form-group upload_info_box">
                        <label class="col-sm-3 control-label">上传结果：</label>
                        <div class="col-sm-6">
                            <textarea class="form-control upload_info" style="white-space:nowrap;overflow: auto;height:500px;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var file_arr = [];
    $(function(){
        document.getElementById("files").addEventListener('change', function (event) {
            file_arr = [];
            for(var i=0; i<event.target.files.length; i++) {
                var obj = event.target.files[i];
                pos = obj.name.lastIndexOf('.')
                if (pos == -1) {
                    alert('文件类型不符合');
                    return false;
                }
                var suffix = obj.name.substring(pos+1);
                if(-1 == $.inArray(suffix,['3gp','asf','avi','dat','dv','flv','f4v','gif','m2t','m3u8','m4v','mj2','mjpeg','mkv','mov','mp4','mpe','mpg','mpeg','mts','ogg','qt','rm','rmvb','swf','ts','vob','wmv','webm'])){
                    alert('文件类型不符合');
                    return false;
                }
                file_arr[i] = obj;

            }
            if(file_arr){
                for(var j=0;j<file_arr.length;j++){
                    $('.upload_info_box').before(
                        '<div class="form-group upload_box" data-j='+j+'>\
                            <label class="col-sm-3 control-label">'+file_arr[j].name+' [<span class="size">0</span>MB/'+(file_arr[j].size/1024/1024).toFixed(2)+'MB]</label>\
                            <div class="col-sm-5">\
                                <div class="progress video_upload_progress">\
                                    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>\
                                </div>\
                            </div>\
                        </div>'
                    );
                }
                $('#files').hide();
                start_upload(0);
            }
        });
    })
    function start_upload(j){
        var obj = $('.upload_box[data-j='+j+']');
        var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
        var videoUpload = {};
        var uploader = new VODUpload({
            // 开始上传
            'onUploadstarted': function (uploadInfo) {
                if(j == 0){
                    window.onbeforeunload = function () {
                        return "请确认信息是否已保存！";
                    };
                }
                obj.find('.video_upload_progress').show().find('.progress-bar').width(0).text('上传中');
                uploader.setUploadAuthAndAddress(uploadInfo, videoUpload.UploadAuth, videoUpload.UploadAddress);
            },
            // 文件上传成功
            'onUploadSucceed': function (uploadInfo) {
                var next = j >= file_arr.length-1;
                $('.upload_info').val($('.upload_info').val()+"【"+videoUpload.VideoId+"】 "+file_arr[j].name+(next?"\n全部上传完成":"")+"\n");
                obj.find('.video_upload_progress .progress-bar').width('100%').text('上传成功');
                if(!next){
                    start_upload(j+1);
                }
            },
            // 文件上传失败
            'onUploadFailed': function (uploadInfo, code, message) {
            },
            // 文件上传进度，单位：字节
            'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
                var progress= Math.ceil(uploadedSize/totalSize*100);
                obj.find('.video_upload_progress .progress-bar').width(progress+'%').text('上传中('+progress+'%)');
                obj.find('span.size').text((uploadedSize/1024/1024).toFixed(2));
            },
            // 上传凭证超时
            'onUploadTokenExpired': function () {
                $.post('/site/refresh-upload-video',{'video_id':videoUpload.VideoId},function(data){
                    if(data.code == 20000 && data.data.UploadAuth != undefined){
                        uploader.resumeUploadWithAuth(data.data.UploadAuth);
                    }else{
                        alert('刷新上传参数错误');
                    }
                },'json');
            }
        });
        $.post('/site/upload-video',{/*'name':obj.name,'size':obj.size*/},function(data){
            if(data.code == 20000 && data.data.UploadAuth != undefined){
                videoUpload = data.data;
                uploader.init();
                uploader.addFile(file_arr[j], null, null, null, userData);
                uploader.startUpload();
            }else{
                alert('获取上传参数错误');
            }
        },'json');
    }
</script>
</div>
</div>
</div>
</div>
</body>
</html>